import React, { useState, Fragment } from 'react';
// import cn from 'classnames';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import styles2 from '../index.less';

const RzrygwFb = ({ data }) => {
    const [value, setValue] = useState([]);

    React.useEffect(() => {
        const v = [...data].sort((a, b) => b.value - a.value);
        if (v.length > 10) {
            let num = 0;
            v.slice(9, v.length - 1).map(item => {
                num += Number(item.value);
                return '';
            });
            const other = [
                {
                    name: '其他',
                    value: num
                }
            ];
            setValue(v.slice(0, 9).concat(other));
        } else {
            setValue(v);
        }
    }, [data]);

    if (!data || data.length === 0) {
        return (
            <Fragment>
                <div className={styles2.chartTitle} style={{ marginTop: 0 }}>
                    新员工职位分布
                </div>
                <Empty style={{ margin: '89px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </Fragment>
        );
    }
    return (
        <div>
            <div className={styles2.chartTitle} style={{ marginTop: 0 }}>
                新员工职位分布
            </div>

            <ReactEcharts
                option={{
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}：{c}人'
                    },
                    series: [
                        {
                            // name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: value,
                            label: {
                                normal: {
                                    formatter: '{b}\n{c}人({d}%)',
                                    textStyle: {
                                        color: '#000000A6'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.3)'
                                    }
                                }
                            }
                        }
                    ]
                }}
                style={{
                    background: '#fff',
                    flex: 1
                }}
            />
        </div>
    );
};

export default RzrygwFb;
